import React, { Component } from 'react';
import axios from './../../axios';
import { 
	Card,
	ConfigProvider,
	Pagination,
	Table,
	Form,
	Input,
	Button
} from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import Utils from './../../utils/utils';

class Log extends Component {
	state = {
		dataSource: [],//列表数据
		count: 0,//列表总条数
		requestUrl: "/log/userLogin/list",//请求数据的Url
		requestParams: {//请求列表数据的参数
			page: 1, 
			pageSize: 10,
			username: "",
			nickname: "",
			phone: "",
			level: ""
		},
		pageSizeOptions:["10","20","50"],//表格显示每页多少条分页记录数
		noTitleKey: "userLogin"
	}
	
	searchFormRef = React.createRef();//搜索信息表单
	
	//获取列表数据
	requestList = (url,data) => {
		axios.ajax({
			url: url, 
			method: "post",
			data: data,
		}).then(res=>{
			if(res.code === 0){
				//Table的数据没有key就报错，自己加一个key
				let resData = res.result.data.map((item, index)=>{
					let key = index;
					return {...item, key}
				})
				this.setState({
					dataSource: resData,
					count: res.result.count
				})
			}
		}).catch(err=>{
		})
	}
	
	//查询列表数据
	searchSubmit = values => {
		let data = {...this.state.requestParams, ...values};
		this.setState({
			requestParams: data
		})
		this.requestList(this.state.requestUrl,data);
	}
	
	//分页功能，点击某页
	pageChange= (current, pageSize) => {
		let data = {...this.state.requestParams};
		data.page = current;
		data.pageSize = pageSize;
		this.setState({
			requestParams: data
		})
		this.requestList(this.state.requestUrl,data);
	}
	
	//分页功能，选择每页显示几个
	pageSizeChange = (current, pageSize) => {
		let data = {...this.state.requestParams};
		data.page = 1;
		data.pageSize = pageSize;
		this.setState({
			requestParams: data
		})
		this.requestList(this.state.requestUrl,data);
	}
	
	onTabChange = key => {
		let reqUrl = "";
		if(key === "userLogin"){
			reqUrl = "/log/userLogin/list";
		}else if(key === "fileAction"){
			reqUrl = "/log/fileOperation/list";
		}else{
			reqUrl = "/log/userOperation/list";
		}
		this.setState({ noTitleKey: key, requestUrl: reqUrl });
		this.requestList(reqUrl,this.state.requestParams);
	};
	
	componentDidMount(){
		//获取公告列表信息
		this.requestList(this.state.requestUrl,this.state.requestParams);
	}
	
	render(){
		const tabListNoTitle = [
			{key: 'userLogin',tab: '用户登录日志'},
			{key: 'fileAction',tab: '文件操作日志'},
			{key: 'userAction',tab: '用户操作日志'}
		];
		
		const columns = [
			{
				title: "用户名",
				dataIndex: "user",
				render: value => {
					return value.user_name
				}
			},
			{
				title: "时间",
				dataIndex: "create_time",
				render: value => {
					return Utils.formateDate(value)
				}
			},
			{
				title: "动作",
				key: "action",
				render: (text, record) => {
					return (record.operate || record.category) + "，" + record.remark
				}
			},
		];
		const count = this.state.count;
		const current = this.state.requestParams.page;
		const pageSize = this.state.requestParams.pageSize;
		return (
			<div style={{padding: 20}}>
				<Card className="page-search-wrap">
					<Form layout="inline" ref={this.searchFormRef} onFinish={this.searchSubmit}>
						<Form.Item
							label="用户名"
							name="username"
							style={{width: "150px"}}
						>
							<Input />
						</Form.Item>
						{/*<Form.Item
							label="昵称"
							name="nickname"
							style={{width: "150px"}}
						>
							<Input />
						</Form.Item>
						<Form.Item
							label="电话"
							name="phone"
							style={{width: "180px"}}
						>
							<Input />
						</Form.Item>
						<Form.Item
							label="日志等级"
							name="level"
							style={{width: "150px"}}
						>
							<Input />
						</Form.Item>*/}
						<Form.Item>
							<Button type="primary" htmlType="submit">
								查询
							</Button>
							<Button htmlType="button" onClick={()=>this.searchFormRef.current.resetFields()}>
								重置
							</Button>
						</Form.Item>
					</Form>
				</Card>
				<Card
					style={{ width: '100%' }}
					tabList={tabListNoTitle}
					activeTabKey={this.state.noTitleKey}
					onTabChange={this.onTabChange}
				>
					<Table
						columns={columns}
						dataSource={this.state.dataSource}
						pagination={false}
						style={{marginTop: 5}}
					/>
					<ConfigProvider locale={zhCN}>
						<Pagination
							showQuickJumper
							showSizeChanger
							current={current}
							defaultPageSize={pageSize}
							total={count}
							showTotal={total => `共 ${total} 条`}
							pageSizeOptions={this.state.pageSizeOptions}
							onChange={this.pageChange}
							onShowSizeChange={this.pageSizeChange}
						/>
					</ConfigProvider>
				</Card>
			</div>
		)
	}
}

export default Log;